import React from 'react';
import '../style/Login.css'
import { useState, useEffect } from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import { BlogLogin, register } from '../api/login.js';
function Login() {
  
    const regist = () => {
        const loginBox = document.querySelector("#login-box")
        loginBox.classList.add('right-panel-active')
    }
    const loginin = () => {
        const loginBox = document.querySelector("#login-box")
        loginBox.classList.remove('right-panel-active')
    }
    const handleFocus = (e) => {
        e.target.className = 'focus'
    };
    const handleBlur = (e) => {
        if (e.target.value == "") {
            e.target.className = ''
        }

    };

    const [account, setAccount] = useState("")
    const [passWord, setPassWord] = useState("")

    const logining = () => {
        if (account == "" || passWord == "") {
            messageApi.open({
                type: 'error',
                content: "输入项不能为空！"
            });
        } else {
            BlogLogin(account, passWord).then(res => {
                console.log(res);
                if (res.status == 200) {
                    sessionStorage.setItem('blogToken', res.accessToken)
                    sessionStorage.setItem('blogUserId',res.data.id)
                    sessionStorage.setItem('blogIsBanned',res.data.isBanned)
                    messageApi.open({
                        type: 'success',
                        content: '登录成功！',
                    });
                    navigate('/')

                } else {
                    messageApi.open({
                        type: 'error',
                        content: res.message
                    });
                }
            })
        }

    }
    const [account2, setAccount2] = useState("")
    const [userName, setUserName] = useState("")
    const [passWord2, setPassWord2] = useState("")

    const registering = () => {
        console.log(1);
        if (account2 == "" || userName == "" || passWord2 == "") {
            messageApi.open({
                type: 'error',
                content: "输入项不能为空！"
            });
        } else {
            const obj = {
                account: account2,
                userName,
                passWord: passWord2
            }
            register(obj).then(res => {
                if (res.status == 200) {
                    messageApi.open({
                        type: 'success',
                        content: '注册成功！',
                    });
                    regist()
                    setAccount2("")
                    setPassWord2("")
                    setPassWord2Else("")
                    setUserName("")

                } else {
                    messageApi.open({
                        type: 'error',
                        content: res.message
                    });
                }
            })
        }

    }

    const [messageApi, contextHolder] = message.useMessage();
    let { pathname } = useLocation();
    const navigate = useNavigate()

    useEffect(() => {
        if (pathname == '/login' && sessionStorage.getItem('blogToken')) {  //内部页面

            navigate('/', { replace: true })

        } else {

        }
    }, [pathname]);
    return (
  <div className="loginm">
      <div className="container" id="login-box">
        {contextHolder}
        <div className="form-container sign-up-container">
            <div className='form'>
                <h1 className='l_h1'>注册</h1>
                <div className="txtb" >
                    <input type="text" onFocus={handleFocus} onBlur={handleBlur} value={account2} onInput={e => {
                        setAccount2(e.target.value);
                    }} />
                    <span className='l_span' data-placeholder="账号" ></span>
                </div>
                <div className="txtb">
                    <input type="text"  onFocus={handleFocus} onBlur={handleBlur} value={userName} onInput={e => {
                        setUserName(e.target.value);
                    }} />
                    <span className='l_span' data-placeholder="昵称" ></span>
                </div>
                <div className="txtb">
                    <input type="password" onFocus={handleFocus} onBlur={handleBlur} value={passWord2} onInput={e => {
                        setPassWord2(e.target.value)
                    }} />
                    <span className='l_span' data-placeholder="密码" ></span>
                </div>

                <button onClick={registering}>注册</button>
            </div>
        </div>
        <div className="form-container sign-in-container">
            <div className='form'>
                <h1 className='l_h1'>登录</h1>
                <div className="txtb">
                    <input type="text" onFocus={handleFocus} onBlur={handleBlur} value={account} onInput={e => {
                        setAccount(e.target.value);
                    }} />

                    <span className='l_span' data-placeholder="账号" ></span>
                </div>
                <div className="txtb">
                    <input type="password"  onFocus={handleFocus} onBlur={handleBlur} value={passWord} onInput={e => {
                        setPassWord(e.target.value)
                    }} />
                    <span className='l_span' data-placeholder="密码"></span>
                </div>
                <a className='l_a' href="#">忘记密码？</a>
                <button onClick={logining}>登录</button>
            </div>
        </div>

        <div className="overlay-container">
            <div className="overlay">
                <div className="overlay-panel overlay-left">
                    <h1 className='l_h1'>已有账号？</h1>
                    <p className='l_p'>请使用您的账号进行登录</p>
                    <button className="ghost" id="signIn" onClick={loginin}>登录</button>
                </div>
                <div className="overlay-panel overlay-right">
                    <h1 className='l_h1'>没有账号?</h1>
                    <p className='l_p'>立即注册</p>
                    <button className="ghost" id="signUp" onClick={regist}>注册</button>
                </div>
            </div>

        </div>
    </div>
  </div>



    )
}


export default Login;